<template>
  <view class="">
    <!-- 自定义导航栏 -->
    <uni-nav-bar :border="false" :statusBar="true">
      <!-- 导航栏标题 -->
      <view class="display-default navBar-title">
        <text class="navBar-title-text">发布话题</text>
      </view>
      <!-- 导航栏右侧-仿小程序退出按钮胶囊 -->
      <template v-slot:right>
        <view class="display-default navBar-title-right">
          <!-- 查看更多-3个点 -->
          <view class="display-default" @click="navBarTitleRightItemClick('more')">
            <image class="navBar-title-right-icon" src="/static/selectPress/more.png"></image>
          </view>

          <!-- 查看更多和退出的中线 -->
          <view class="navBar-title-right-midcourtLine"></view>

          <!-- 退出 -->
          <view class="display-default" style="" @click="navBarTitleRightItemClick('exit')">
            <image class="navBar-title-right-icon" style="" src="/static/selectPress/exit.png"></image>
          </view>
        </view>
      </template>
    </uni-nav-bar>

    <!-- 请选择发布类别-标题栏 -->
    <view class="consultCategory-title">
      <text style="font-size: 17px;">请选择发布类别</text>
      <text style="color: red;">（必选）</text>
    </view>

    <!-- 可发布的咨询分类 -->
    <view class="consultCategory-list">
      <view class="consultCategory-item" v-for="(item,index) in consultList" :key="index" v-if="item.isPublish == 'Y'"
        :style="item.consultId == press.consultId ? 'border: 1px solid red;color: red;border-radius: 10px;' : ''"
        @click="consultItemClick(item)">
        <text>{{item.consultName}}</text>
      </view>
    </view>

    <!-- 分割线 -->
    <view class="halving-line"></view>

    <!-- 当前咨询分类是否发布的时候需要填写联系方式 -->
    <view v-show="isContact == 'Y' || isContact == 'Y-N'">
      <!-- 请选择联系方式 -->
      <view style="padding: 25rpx;">
        <text style="font-size: 17px;">请选择联系方式</text>
        <text v-show="isContact == 'Y'" style="color: red;">（必须填一个）</text>
        <text v-show="isContact != 'Y'" style="color: red;">（可选）</text>
      </view>

      <!-- 联系方式from表单 -->
      <uni-forms ref="form" :modelValue="press" :rules="rules">
        <!-- 微信号input输入框 -->
        <uni-forms-item label="微信号" name="wxNumber" class="display-default form-item-contact">
          <uni-easyinput v-model="press.wxNumber" placeholder="输入wx号" :maxlength="24" />
        </uni-forms-item>
        <!-- QQ号input输入框 -->
        <uni-forms-item label="QQ号" name="qqNumber" class="display-default form-item-contact">
          <uni-easyinput type="number" v-model="press.qqNumber" placeholder="输入QQ号" :maxlength="11" />
        </uni-forms-item>
        <!-- 手机号input输入框 -->
        <uni-forms-item label="手机号" name="phoneNumber" class="display-default form-item-contact">
          <uni-easyinput class="input-phoneNumber" :maxlength="11" type="number" v-model="press.phoneNumber"
            placeholder="+86 输入11位的手机号码" @blur="inputPhoneNumberBule" />
        </uni-forms-item>
      </uni-forms>

      <!-- 分割线 -->
      <view class="halving-line"></view>
    </view>

    <!-- 请输入发布内容 -->
    <view style="padding: 25rpx;">
      <text style="font-size: 17px;">请输入发布内容</text>
    </view>

    <view style="margin: 10rpx 25rpx;">
      <!-- 富文本编辑框 -->
      <uni-easyinput id="easyinput" type="textarea" :autoHeight="true" :inputBorder="false" :maxlength="2000"
        :trim="true" v-model="press.content" placeholder="今天你有什么趣事和大家分享？" placeholderStyle="font-size: 18px;" />

      <!-- 表情、图片、视频图标点击 -->
      <view class="expression-img-video">
        <view>
          <image class="select-icon" src="/static/releaseConsultingView/expression.svg" @click="openExpression"></image>
          <image class="select-icon"
            :src="filesImageList.length < 9 && filesVideoList.length == 0 ? '/static/releaseConsultingView/image.svg' : '/static/releaseConsultingView/imageDisable.svg'"
            @click="openImage">
          </image>
          <!--  <image class="select-icon"
            :src="filesImageList.length == 0 && filesVideoList.length < 1 ? '/static/releaseConsultingView/video.svg' : '/static/releaseConsultingView/videoDisable.svg'"
            @click="openVideo"></image> -->
        </view>
        <view class="content-record">{{press.content.length}}字</view>
      </view>

      <view class="file-picker__container">
        <!-- 显示图片文件 -->
        <view class="file-picker__box" v-for="(item,index) in filesImageList" :key="index">
          <view class="file-picker__box-content" style="border: 1px solid #eee;">
            <!-- 上传位置 -->
            <image class="file-image" :src="item" mode="aspectFill" @click="previewImage(item,index)"></image>
            <view class="icon-del-box" @click="delImageFile(index)">
              <view class="icon-del"></view>
              <view class="icon-del rotate-del"></view>
            </view>
          </view>
        </view>

        <!-- 显示视频文件 -->
        <view class="file-picker__box" v-for="(item,index) in filesVideoList" :key="index">
          <view class="file-picker__box-content" style="border: 1px solid #eee;">
            <!-- 上传位置 -->
            <video class="file-image" :src="item" :controls='false' :autoplay='false' :show-center-play-btn="false"
              auto-pause-if-navigate>
              <image class="file-image" style="z-index: 999;" :src="item" mode="aspectFill"></image>
            </video>

            <view class="icon-del-box" @click="delVideoFile(index)">
              <view class="icon-del"></view>
              <view class="icon-del rotate-del"></view>
            </view>
          </view>
        </view>

        <!-- 加号 -->
        <view class="file-picker__box" v-show="filesImageList.length < 9 && filesVideoList.length == 0">
          <view class="file-picker__box-content is-add" style="border: 1px solid #eee;" @click="choose">
            <view class="icon-add"></view>
            <view class="icon-add rotate-add"></view>
          </view>
        </view>
      </view>

      <!-- 表情选择弹出框 -->
      <uni-popup ref="popupExpression" maskBackgroundColor="#55585a+7a" type="bottom">
        <!-- 选择表情，轮播图选择 -->
        <swiper class="select-expression" :indicator-dots="true" :autoplay="false" :duration="300">
          <swiper-item>
            <view id="swiperDom">
              <view style="padding-bottom: 100rpx;">
                <uni-grid :column="7" :showBorder="false" :Boolean="false">
                  <uni-grid-item style="" v-for="(item,index) in expressionListOne" :key="index">
                    <view class="display-default" style="width: 100%;height: 100%;" @click="expressionItemClick(item)">
                      <text style="font-size: 22px;">{{item}}</text>
                    </view>
                  </uni-grid-item>
                </uni-grid>
              </view>
            </view>
          </swiper-item>
          <swiper-item>
            <view id="swiperDom">
              <view style="padding-bottom: 100rpx;">
                <uni-grid :column="7" :showBorder="false">
                  <uni-grid-item style="" v-for="(item,index) in expressionListTwo" :key="index">
                    <view class="display-default" style="width: 100%;height: 100%;" @click="expressionItemClick(item)">
                      <text style="font-size: 22px;">{{item}}</text>
                    </view>
                  </uni-grid-item>
                </uni-grid>
              </view>
            </view>
          </swiper-item>
        </swiper>
      </uni-popup>
    </view>

    <!-- 底部温馨提示文字 -->
    <view class="bottom-warmPromptText">
      <!-- 用户是否同意《发布规范》，不同意不能发布！ -->
      <view class="display-default">
        <uni-data-checkbox class="checkbox" multiple v-model="isConsent" selectedColor="red" selectedTextColor="#666666"
          :localdata="range">
        </uni-data-checkbox>
      </view>
      <view style="color: #ff3d3d;">
        <view>
          发布提示：
        </view>
        <view>
          1、本平台禁止发布黄、赌、毒及政策等一切法律禁止内容，详细请参考《发布规范》，如有违反将查封账户！
        </view>
        <view>
          2、禁止发布虚假、诱导性内容，如果违反后果自负！
        </view>
      </view>
    </view>

    <!-- 底部申请发布按钮 -->
    <view class="display-default publish-press">
      <!-- 取消 -->
      <view class="display-default publish-press-cancel">
        <text class="publish-press-cancel-text" @click="backPage">取消</text>
      </view>
      <!-- 申请发布 -->
      <view class="display-default publish-press-confirm" @click="publishPress">
        <text class="publish-press-confirm-text">申请发布</text>
      </view>
    </view>

    <!-- 右上角胶囊选项弹出层 -->
    <uni-popup ref="pressPopup" type="bottom">
      <view class="pressDialog-popup-body">
        <view class="display-default" style="justify-content: flex-start;padding: 30rpx;">
          <view class="select-press-item" @click="pressSelect('refresh')">
            <uni-icons style="background: #eee;padding: 20rpx;border-radius: 60px;" custom-prefix="iconfont"
              type="refreshempty" size="55rpx" color="#000"></uni-icons>
            <text style="color: #000;font-size: 12px;padding: 10rpx 0 0 20rpx;">刷新</text>
          </view>
        </view>
        <button class="pressDialog-button-cancel" @click="popupClose('pressPopup')">取消</button>
      </view>
    </uni-popup>

    <!-- 底部申请发布按钮的高度-固定值 -->
    <view style="padding-bottom: 100rpx;"></view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 用户是否同意发布规范，不同意不能发布！
        isConsent: [1],
        range: [{
          "value": 1,
          "text": "我已阅读并同意遵守《发布规范》的全部内容"
        }],
        // 咨询分类列表 
        consultList: [],
        // 富文本编辑框最后一次光标所在的位置
        inputTextRangeEndNum: 0,
        // 当前咨询分类是否发布的时候需要填写联系方式 [Y, N, Y-N]
        isContact: '',

        // 需要发布的信息
        press: {
          // 咨询分类点击的id
          consultId: '',
          // 发布内容
          content: '',
          pressImages: '',
          // 当前咨询分类发布的时候需要填写的联系方式（可选，必选其一）
          wxNumber: '', // 微信号
          qqNumber: '', // QQ号
          phoneNumber: '', // 手机号
          publishProvince: '' // 发布人所在位置省份
        },

        // from表单校验规则
        rules: {
          phoneNumber: {
            rules: [{
              pattern: /^[1]([3-9])[0-9]{9}$/,
              errorMessage: '手机号不合法',
            }]
          }
        },
        // 上传的图片数组
        filesImageList: [],
        // 上传的视频数组
        filesVideoList: [],
        // 表情数组
        expressionListOne: [
          '😃', '🙃', '😍', '😙', '😛', '😬', '😄', '😉', '☺', '😘', '😚', '🤑', '😁', '😅', '😊', '😋', '😜', '😎',
          '😂', '🤣', '😱'
        ],
        expressionListTwo: [
          '🤗', '😑', '🤫', '😞', '😔', '😣', '😤', '😏', '😒', '🤔', '😟', '😕', '😖', '😮', '😶', '🙄', '🤨', '😠',
          '🙁', '😫', '🥵'
        ],
        // 定时器对象
        setInterval: '',
        token: ''
      }
    },
    async onLoad() {
      uni.showLoading({
        title: '',
        mask: false
      });

      this.token = await uni.getStorageSync('token')

      await this.$http.index.getConsultListInfo().then(res => {
        // console.log("res: " + JSON.stringify(res));
        if (res.code == 401) {
          uni.showToast({
            title: res.msg,
            icon: 'none',
            position: 'center'
          })
          return
        }
        if (!res.code) {
          uni.showToast({
            title: '服务器开小差了',
            icon: 'none',
            position: 'center'
          })
          return
        }

        this.consultList = res.data.sort(function(a, b) {
          return a.sort - b.sort // 对排序字段进行排序
        })
      }).catch(err => {
        console.log("err: " + JSON.stringify(err));
      })

      // 获取当前省份信息
      uni.getLocation({
        type: "gcj02",
        geocode: true,
        success: (res) => {
          // 获取 湖南省 字符串
          let province = res.address.province

          // 从索引为0的位置，截取province.length - 1个长度返回
          this.press.publishProvince = province.slice(0, province.length - 1);
        }
      })

      uni.hideLoading()

      // 定时器，作用是实时定位光标，用户可插入表情
      this.setInterval = setInterval(() => {
        uni.getSelectedTextRange({
          success: res => {
            // 保存富文本输入框的结束光标
            this.inputTextRangeEndNum = res.end
            // console.log('getSelectedTextRange res', res.start, res.end)
          }
        })
      }, 300)
    },
    onBackPress(e) {
      // console.log("e: " + JSON.stringify(e));
      if (e.from == 'backbutton') {
        this.onBackPage()
        return true; //阻止默认返回行为
      }
    },
    onUnload() {
      clearInterval(this.setInterval)
    },
    methods: {
      /**
       * @description 咨询分类点击事件
       */
      consultItemClick(item) {
        if (this.press.consultId == item.consultId) {
          this.press.consultId = ''
          this.isContact = ''
          return
        }
        this.press.consultId = item.consultId
        this.isContact = item.isContact
      },

      /**
       * @description 当用户需要返回上一级页面时触发这里
       */
      onBackPage() {
        if (this.press.content) {
          // #ifdef H5
          uni.showModal({
            title: "内容尚未保存，确认退出吗？",
            cancelText: "继续编辑",
            success: (res) => {
              let confirm = res.confirm
              let cancel = res.cancel

              // 确定
              if (confirm) {
                uni.navigateBack()
                return
              }
              // 继续编辑
              if (cancel) {
                return
              }
            },
            fail: (err) => {
              uni.navigateBack()
            }
          })
          // #endif

          // #ifndef H5
          return uni.navigateTo({
            url: "/pages/customPopup/customPopup?title=内容尚未保存，确认退出吗？&confirmText=确定&cancelText=继续编辑&type=backPage"
          })
          // #endif
        } else {
          uni.navigateBack()
        }
      },

      /**
       * @description 顶部导航栏more和exit点击事件
       */
      navBarTitleRightItemClick(name) {
        if (name == 'exit') {
          this.onBackPage()
        }

        if (name == 'more') {
          this.$refs.pressPopup.open()
          console.log("点击3个点");
          return
        }
        console.log(name);
      },

      /**
       * @description popup弹出层功能列表点击
       */
      pressSelect(name) {
        console.log("name: ", name);

        if (name == 'refresh') {
          uni.redirectTo({
            url: '/pages/selectPress/selectPress'
          })
          return
        }
      },

      /**
       * @description popup弹出层关闭事件
       */
      popupClose(name) {
        if (name == 'pressPopup') {
          this.$refs.pressPopup.close()
        }
      },

      /**
       * @description 手机号输入框失去焦点时触发
       */
      inputPhoneNumberBule() {
        this.$refs.form.validate().then(res => {
          console.log('表单数据信息：', JSON.stringify(res));
        }).catch(err => {
          console.log('表单错误信息：', JSON.stringify(err));
        })
      },

      /**
       * @description 点击底部取消
       */
      backPage() {
        this.onBackPage()
      },

      /**
       * @description 点击底部申请发布
       */
      async publishPress() {
        // 判断是否选择了发布类别
        if (!this.press.consultId) {
          uni.showToast({
            title: '请至少选择一种发布类别！',
            icon: 'none',
            position: 'center'
          });
          return
        }

        // 判断是否为必填类型
        if (this.isContact == 'Y') {
          // 3个输入框其中必须有一个有值
          if (this.press.wxNumber || this.press.qqNumber || this.press.phoneNumber) {
            this.$refs.form.validate().then(res => {
              console.log('表单数据信息：', JSON.stringify(res));
            }).catch(err => {
              console.log('表单错误信息：', JSON.stringify(err));
              uni.showToast({
                title: '手机号不合法！',
                icon: 'none',
                position: 'center'
              });
              return
            })
          } else {
            uni.showToast({
              title: '请至少选择一种联系方式！',
              icon: 'none',
              position: 'center'
            });
            return
          }
        }

        // 判断是否为非必填类型
        if (this.isContact == 'Y-N') {
          this.$refs.form.validate().then(res => {
            console.log('表单数据信息：', JSON.stringify(res));
          }).catch(err => {
            console.log('表单错误信息：', JSON.stringify(err));
            uni.showToast({
              title: '手机号不合法！',
              icon: 'none',
              position: 'center'
            });
            return
          })
        }

        // 判断富文本框是否有内容
        if (!this.press.content) {
          uni.showToast({
            title: '请输入发布内容！',
            icon: 'none',
            position: 'center'
          });
          return
        }

        // 判断富文本框是否大于10个字符
        if (this.press.content.length < 10) {
          uni.showToast({
            title: '发布内容字数需要大于10个字符！',
            icon: 'none',
            position: 'center'
          });
          return
        }

        // 判断是否已勾选 我已阅读并同意遵守《发布规范》的全部内容
        if (this.isConsent[0] != 1) {
          uni.showToast({
            title: '请勾选我已阅读并同意遵守《发布规范》的全部内容！',
            icon: 'none',
            position: 'center'
          });
          return
        }

        // 显示Loading提示框
        uni.showLoading({
          title: '正在提交...',
          mask: false
        });

        // 判断发布省区是否为空，为空就自动赋值为 未知
        if (!this.press.publishProvince) {
          this.press.publishProvince = '未知'
        }

        if (this.filesImageList.length > 0) {
          // if(!this.token){

          // }
          // 要上传的文件列表
          // 对图片列表进行格式化提交
          let newFilesImageList = []

          for (var i = 0; i < this.filesImageList.length; i++) {
            newFilesImageList.push({
              "name": 'files' + i,
              "uri": this.filesImageList[i]
            })
          }

          console.log("newFilesImageList: " + JSON.stringify(newFilesImageList));

          await uni.uploadFile({
            url: this.$url + 'common/upload',
            files: newFilesImageList, // 要上传的文件列表 
            formData: {
              'type': 'pressImage',
              "num": newFilesImageList.length
            },
            header: {
              "Authorization": this.token
            },
            success: (res) => {
              // console.log("res: " + JSON.stringify(res));
              let data = JSON.parse(res.data)
              // console.log("data: " + JSON.stringify(data));

              if (data.code == 401) {
                uni.showToast({
                  title: data.msg,
                  icon: 'none',
                  position: 'center'
                })
                return
              }
              if (!data.code) {
                uni.showToast({
                  title: '服务器开小差了',
                  icon: 'none',
                  position: 'center'
                });
                return
              }

              let imageUrls = data.data.url
              console.log("imageUrls: " + JSON.stringify(imageUrls));

              // 将上传完后端返回回来的图片路径存入，其中多个图片路径用;分割
              this.press.pressImages = imageUrls

              // 提交数据并返回首页
              this.$http.press.publishPress(this.token, this.press).then(res => {
                console.log("res: " + JSON.stringify(res));
                if (res.code == 401) {
                  uni.showToast({
                    title: res.msg,
                    icon: 'none',
                    position: 'center'
                  })
                  return
                }
                if (!res.code) {
                  uni.showToast({
                    title: '服务器开小差了',
                    icon: 'none',
                    position: 'center'
                  });
                  return
                }

                uni.showToast({
                  title: '发布成功！',
                  icon: 'none',
                  position: 'center'
                });

                // 发布成功后通知首页需要刷新数据
                uni.setStorageSync('isPublishPress', true)

                // 隐藏Loading提示框
                uni.hideLoading()

                // 发布成功，延迟500ms后返回
                setTimeout(() => {
                  uni.navigateBack()
                }, 500)
              }).catch(err => {
                console.log("err: " + JSON.stringify(err));
              })
            },
            fail: (err) => {
              console.log("err: " + JSON.stringify(err));
              uni.showToast({
                title: '服务器开小差了',
                icon: 'none',
                position: 'center'
              });
            }
          })
        } else {
          // 提交数据并返回首页
          await this.$http.press.publishPress(this.token, this.press).then(res => {
            console.log("res: " + JSON.stringify(res));
            if (res.code == 401) {
              uni.showToast({
                title: res.msg,
                icon: 'none',
                position: 'center'
              })
              return
            }
            if (!res.code) {
              uni.showToast({
                title: '服务器开小差了',
                icon: 'none',
                position: 'center'
              });
              return
            }

            uni.showToast({
              title: '发布成功！',
              icon: 'none',
              position: 'center'
            });

            // 向上级页面携带返回消息体
            uni.setStorageSync('isPublishPress', true)

            // 隐藏Loading提示框
            uni.hideLoading()

            // 发布成功，延迟500ms后返回
            setTimeout(() => {
              uni.navigateBack()
            }, 500)
          }).catch(err => {
            console.log("err: " + JSON.stringify(err));
          })
        }
      },

      /**
       * @description 点击选择表情
       */
      openExpression() {
        this.$refs.popupExpression.open()
      },

      /**
       * @description 打开选择图片文件
       */
      openImage() {
        let selectImageNum = 9 - this.filesImageList.length
        if (selectImageNum) {
          uni.chooseImage({
            count: selectImageNum,
            success: (e) => {
              console.log("e: " + JSON.stringify(e));
              // 将选择后的图片数组和现有的进行合并
              this.filesImageList = this.filesImageList.concat(e.tempFilePaths)
            }
          })
        } else {
          uni.showToast({
            title: '你最多只能选择9张图片',
            icon: 'none',
            position: 'center'
          });
        }
      },

      // 预览多张图片 
      previewImage(imgUrl, index) {
        console.log("进入点击");
        uni.previewImage({
          urls: this.filesImageList, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
          current: imgUrl // 当前显示图片的http链接，默认是第一个
        })
      },

      /** 
       * @description 删除图片
       */
      delImageFile(index) {
        this.filesImageList.splice(index, 1)
      },

      /**
       * @description 打开选择视频文件
       */
      openVideo() {
        let selectVideoNum = 1 - this.filesVideoList.length
        if (selectVideoNum) {
          uni.chooseVideo({
            success: (e) => {
              console.log(e);
              console.log("e: " + JSON.stringify(e.tempFilePath));
              this.filesVideoList = this.filesVideoList.concat(e.tempFilePaths)
            }
          })
        }
      },

      /**
       * @description 删除视频
       */
      delVideoFile(index) {
        this.filesVideoList.splice(index, 1)
      },

      /**
       * @description 点击下面加号可选择图片或视频文件
       */
      choose() {
        this.openImage()
        // uni.showActionSheet({
        //   itemList: ['A', 'B', 'C'],
        //   success: function(res) {
        //     console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
        //   },
        //   fail: function(res) {
        //     console.log(res.errMsg);
        //   }
        // });
      },

      /**
       * @description 点击表情时触发
       * @param item 表情的item项
       */
      expressionItemClick(item) {
        // 截取光标之前的数值
        let str1 = this.press.content.substring(0, this.inputTextRangeEndNum);
        // 截取光标之后的数值
        let str2 = this.press.content.substring(this.inputTextRangeEndNum, this.press.content.length);

        // 将 之前的值 + 表情 + 之后的值 = 合起来
        this.press.content = str1 + item + str2
      }
    }
  }
</script>

<style lang="scss">
  page {
    background: #fff;
  }

  // 自定义导航栏样式-1
  /deep/ .uni-navbar__header {
    padding: 0px;
  }

  /deep/ .uni-navbar__header-btns-left {
    flex: 1;
  }

  /deep/ .uni-navbar__header-btns-right {
    flex: 1;
  }

  // 富文本输入框自定义样式
  /deep/ .uni-textarea-textarea,
  /deep/ .uni-textarea-compute {
    font-size: 18px;
  }

  // 我已阅读并同意遵守《发布规范》的全部内容，多选框样式
  /deep/ .uni-data-checklist .checklist-group .checklist-box .checklist-content .checklist-text[data-v-84d5d996] {
    font-size: 13px;
  }

  // 我已阅读并同意遵守《发布规范》的全部内容，多选框样式
  /deep/ .uni-data-checklist {
    margin-bottom: 50rpx;
  }

  // 自定义导航栏样式
  .navBar-title {
    text-align: center;
    width: 100%;
    height: 100%;

    // 导航栏标题样式
    & .navBar-title-text {
      font-size: 17px;
    }
  }

  // 导航栏右侧，仿小程序胶囊图标样式
  .navBar-title-right {
    border: 0.9px solid #cdcdcd;
    border-radius: 60px;
    height: 65%;

    // 图标样式
    & .navBar-title-right-icon {
      width: 45rpx;
      height: 45rpx;
      padding: 15rpx 22rpx;
    }

    // 中线
    & .navBar-title-right-midcourtLine {
      height: 60%;
      width: 1px;
      border-left: 1px solid #e3e3e3;
    }
  }

  // 请选择发布类别-标题栏
  .consultCategory-title {
    padding: 25rpx;
    border-top: 1px solid #f5f5f5;
  }

  // 可发布的咨询分类
  .consultCategory-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    & .consultCategory-item {
      background: #f5f5f5;
      width: 170rpx;
      margin: 25rpx;
      text-align: center;
      padding: 15rpx 0;
      color: #444;
      font-size: 15px;
      border: 1px solid #f5f5f5;
    }
  }

  // 分割线
  .halving-line {
    width: 100%;
    background: #f5f5f5;
    height: 20rpx;
  }

  // 联系方式form表单，item项
  .form-item-contact {
    padding: 10rpx 50rpx;
  }

  // 内容字数记录
  .content-record {
    display: flex;
    justify-content: flex-end;
    color: #7d7d7d;
    padding-bottom: 30rpx;
  }

  // 表情，图片，视频图标点击
  .expression-img-video {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #f0f0f0;

    & .select-icon {
      width: 50rpx;
      height: 50rpx;
      margin-right: 30rpx;
    }
  }

  // 选择表情，轮播图选择
  .select-expression {
    background: #fff;
    box-shadow: 0px 0px 10px #f0f0f0;
    height: 400rpx;
  }

  // 底部温馨提示文字
  .bottom-warmPromptText {
    background: #f5f5f5;
    padding: 50rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-top: 100rpx;
  }

  // 底部申请发布按钮
  .publish-press {
    position: fixed;
    bottom: 0;
    height: 100rpx;
    width: 100%;

    // 取消
    & .publish-press-cancel {
      height: 100%;
      width: 35%;
      background: #f5f5f5;

      & .publish-press-cancel-text {
        font-size: 17px;
        color: #000;
      }
    }

    // 申请发布
    & .publish-press-confirm {
      height: 100%;
      width: 65%;
      background: #ff3d3d;

      & .publish-press-confirm-text {
        font-size: 17px;
        color: #fff;
      }
    }
  }

  // 上传加号框-列表
  .file-picker__container {
    /* #ifndef APP-NVUE */
    box-sizing: border-box;
    /* #endif */
    display: flex;
    flex-wrap: wrap;
    position: relative;
    margin-top: 20rpx;

    // 上传加号框-item项
    & .file-picker__box {
      /* #ifndef APP-NVUE */
      box-sizing: border-box;
      /* #endif */
      position: relative;
      // flex: 0 0 33.3%;
      width: 33.3%;
      height: 0;
      padding-top: 33.33%;

      & .file-picker__box-content {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: 5px;
        border-radius: 5px;
        // 这个会把删除-号遮盖
        // overflow: hidden;

        & .file-image {
          width: 100%;
          height: 100%;
        }

        // 删除
        & .icon-del-box {
          /* #ifndef APP-NVUE */
          display: flex;
          /* #endif */
          align-items: center;
          justify-content: center;
          position: absolute;
          top: -5px;
          right: -5px;
          height: 26px;
          width: 26px;
          border-radius: 50%;
          background-color: #ff4a4a;
          z-index: 2;
          // transform: rotate(-45deg);

          & .icon-del {
            width: 15px;
            height: 2px;
            background-color: #fff;
            border-radius: 2px;
          }

          & .rotate-del {
            position: absolute;
            // transform: rotate(90deg);
          }
        }

        // 添加
        & .icon-add {
          width: 80rpx;
          height: 8rpx;
          background-color: #f1f1f1;
          border-radius: 2px;
        }

        & .rotate-add {
          position: absolute;
          transform: rotate(90deg);
        }
      }

      & .is-add {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        align-items: center;
        justify-content: center;
      }
    }
  }

  // 右上角胶囊选项弹出层样式
  .pressDialog-popup-body {
    padding-bottom: 10rpx;
    border-radius: 10px 10px 0 0;
    background: #fff;

    & .select-press-item {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin-right: 50rpx;
    }

    & .pressDialog-button-cancel {
      background: #eee;
      margin-top: 10rpx;
      padding: 5rpx 0;
      font-size: 16px;
      width: 95%;
    }
  }
</style>
